<template>
	<view class="content">
		<!-- <view class="headNav"><h1>好装修</h1></view>
		view class="cu-bar search bg-white">
			<view class="action">
				<text>杭州</text>
				<text class="cuIcon-triangledownfill"></text>
			</view>
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input class="text-center" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索" confirm-type="search"></input>
			</view>
			<view class="imgwidth"><image src='../../static/images/pic109.png'></image></view>
		</view>
		<view class="flex choose">
			<h3>为你精选</h3>
			<h3>设计圈</h3>
			<view></view>
		</view> -->
		<view class="Recommend flex">
			<text>推荐设计师</text>
			<view>
				<text>热门</text>
				<text>关注</text>
			</view>
		</view>
		<view class="works">
			<scroll-view class="scroll-view_H flex" :scroll-x='true'>
				<view class="b">
					<view id="demo1" class="scroll-view-item_H uni-bg-red" v-for="(item,index) in list" :key=index>
						<view>
							<view><image :src=item.url></image></view>
							<p>{{item.name}}</p>
							<view>关注</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="zuop">
			<view class="cu-list menu-avatar" v-for="(item,index) in 5" :key=index>
				<view class="cu-item">
					<view class="cu-avatar round lg" style="background-image:url(../../static/images/pic19.png)"></view>
					<view class="content flex-sub flex">
						<view class="text-grey">
							<text>姚包图</text>
							<text>设计师</text>
						</view>
						<view class="text-gray text-sm">
							关注
						</view>
					</view>
				</view>
				<h3>自己家的新房设计，希望得到大家都指点</h3>
				<view class="img"><image src='../../static/images/pic44.png'></image></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						url:'../../static/images/pic18.png',
						name:'杨包图'
					},
					{
						url:'../../static/images/pic16.png',
						name:'宋包图'
					},
					{
						url:'../../static/images/pic15.png',
						name:'赵包图'
					},
					{
						url:'../../static/images/pic13.png',
						name:'钱包图'
					}
				]
			}
		},
		
	}
</script>
		
		

<style lang="scss">
.headNav{
	padding: 28upx;
	display: flex;
	justify-content: space-between;
	h2{
		font-size: x-large;
	}
	span{
		position: relative;
		top: 40upx;
		color: #007AFF;
	}
}
.cu-bar {//顶部搜索框
	.imgwidth{
		width: 60upx;
		height: 35upx;
		padding-right: 24upx;
		image{
			width: 100%;
			height: 100%;
		}
	}
}
.choose{
	padding:30upx 0 20upx 60upx;
	view{
		position: relative;
		width: 60upx;
		height: 8upx;
		background: #4190ff;
		border-radius: 5upx;
		top: 50upx;
		left: -40upx;
	}
	h3{
		color: #b6b3ba;
	}
	h3:nth-of-type(2){
		color: #666;
		position: relative;
		left:35upx;
	}
}
.Recommend{//热门推荐
	justify-content: space-between;
	padding:30upx;
	color: #767676;
	view{
		text:nth-of-type(1){
			color: #f39537;
			padding-right: 30upx;
		}
	}
}
.works{//作品
	padding: 0 26upx;
	.scroll-view_H{
		height: 340upx !important;
		// border: 1px solid;
		.b{
			width:1050upx;
			>view{
				height: 309upx;
				width: 220upx;
				display: inline-block;
				box-shadow: -2px 2px 6px #ccc;
				border-radius: 12upx;
				margin:20upx;
				>view{
					width: 80%;
					height: 60%;
					margin:22% auto;
					text-align: center;
					>view:nth-of-type(1){
						width: 100upx;
						height: 100upx;
						border-radius: 50%;
						overflow: hidden;
						margin: 0 auto;
						image{
							width: 100%;
							height: 100%;
						}
					}
					>p{
						padding: 10upx 0;
						margin: 20upx 0;
						font-size: inherit;
					}
					>view{
						width: 100upx;
						height: 40upx;
						background: #3388ff;
						color: #fff;
						border-radius:15upx;
						margin: 0 auto;
						font-size: smaller;
						line-height: 40upx;
					}
				}
			}
		}
		
	}
}
.zuop{//作品详情
	.cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after{
		border: 0!important;
	}
	h3{
		padding: 10upx 30upx;
	}
	.cu-item{
		>view{
			display: flex;
			justify-content: space-between;
			.text-grey{
				color: #403f3f;
			}
			.text-grey:nth-of-type(1) text:nth-of-type(2){
				color: #fff;
				width: 80upx;
				height: 30upx;
				background: #3488ff;
				display: inline-block;
				font-size: x-small;
				text-align: center;
				border-radius: 6upx;
				line-height: 30upx;
				margin-left: 15upx;
			}
			.text-sm{
				display: inline-block;
				width:100upx;
				height:50upx;
				border-radius: 10upx;
				text-align: center;
				line-height: 50upx;
				border: 1px solid #3488ff;
				color: #3488ff;
			}
		}
	}
	.img{
		margin:10upx 30upx;
		image{
			width: 100%;
		}
	}
}
</style>
